11. Project Update Part 2
Building the Home Town App (Part 2 of 3)
It's time for you to start applying the layout skills you just learned! For this exercise, feel free to continue with the Brighton Times starter code from earlier. If you didn't finish the exercise last time, no worries -- you can grab a working copy of the code up until this point here.
You are also welcome to work directly in the workspace below!
Instructions
For this part in the project, pick a set of breakpoints that you think look fitting. Use one of the patterns that you just learned to style the page so it looks great even on desktop and tablet as well. Adjust your breakpoints until you get something that you're happy with. Remember -- what might work on a one phone might not work so well on others.
Be sure to test your resulting page on phones, tablets, and browser windows of all different sizes so that you get a sense of what the page looks like everywhere. Sometimes, you'll uncover unexpected behavior or odd design elements!
The most important part of this project is that you try out different layout patterns and find out what you like! At the very end, feel free to view how we decided to do it in the workspace below (i.e., the Solution folder).
Workspace
This section contains either a workspace (it can be a Jupyter Notebook workspace or an online code editor work space, etc.) and it cannot be automatically downloaded to be generated here. Please access the classroom with your account and manually download the workspace to your local machine. Note that for some courses, Udacity upload the workspace files onto https://github.com/udacity, so you may be able to download them there.
Workspace Information:
- Default file path:
- Workspace type: html-live
- Opened files (when workspace is loaded): n/a
Solution
Along with the Solution folder in the above workspace, feel free to check out a quick video walkthrough of the code below:
Project Update Part 2 - Responsive Web Design Fundamentals
Task Description:
Before moving forward, let's make sure we're on the same page!
Task Feedback:
Well done! Let's move forward.